<template>
    <div>
        <!-- 导航面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 表单数据 -->
        <el-table ref="singleTable" :data="rightList" highlight-current-row style="width: 100%" border>
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column property="authName" label="权限" width="220">
            </el-table-column>
            <el-table-column property="path" label="路径" width="220">
            </el-table-column>
            <el-table-column  label="层级" width="220">
                <!-- 过滤器需要写在插值表单式中，所以使用自定义表单中的template -->
                <template slot-scope="scope">
                   <!-- 写油管:数据|过滤器名称 -->
                   <span>{{scope.row.level|levelforma}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getallrightList } from '@/api/index.js'
export default {
  data () {
    return {
      // 权限列表数据
      rightList: []
    }
  },
  mounted () {
    //   渲染权限列表，参数为list
    getallrightList('list').then(res => {
      console.log(res)
      // 赋值权限列表
      this.rightList = res.data
    })
  },
  // 添加局部过滤器
  filters: {
    // 里面一个函数
    levelforma (level) {
      // 将返回的level=""0"转为‘一级’
      if (level === '0') {
        // 过滤器返回数据
        return '一级'
      } else if (level === '1') {
        return '二级'
      } else if (level === '2') {
        return '三级'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
